<template>
	<div class="vue_app buyGiftCard overhid" style="position: relative;width: 100%;height: 100%;">
		<div>
			<my-header :title="'购买礼品卡'" :hasTitle="true" :hasBack="true"></my-header>
			<span class="buycarddetil" @click="jumpEvent">购买记录</span>
			<!--头部-->
			<!-- <div class="integralBuy_top">
				<img id="giftadimg" :src="myadimg" style="max-height: 8rem;width: 100%;" />
			</div> -->
			<component 
				v-for="(item, index) in getRealComponentsList[0][1]" 
				v-sdrag="{componentName: item.componentName, handleType: 'sort', index}" 
				:is="item.componentName" 
				:key="index" 
				:config="item" 
				:data-id="item.id" 
				:dataList="dataStore[item.componentName][item.id]" 
				:part="1">
			</component>
		</div>
		<div class="overhid" :style="`height: ${screenHeight}px`" >
			<vertical-scroll ref='verticalScroll'>
				<ul class="buyCard_list">
					<li v-for="(item,index) in carddata" :key="index">
						<div class="giftname">{{item.giftcardName}}</div>
						<div class="giftimg">
							<span class="firstbuy" v-if="item.firstCouponCodes">首充</span>
							<img :src="item.giftcardImg || 'static/image/big-giftcard.png'" style="height:5rem;width:8rem" />
						</div>
						<div class="giftcontant" :class="{buymargintop:(!item.firstCouponCodes && !item.oldCouponCodes)}">
							<div v-if="item.firstCouponCodes || item.oldCouponCodes">
								<div class="givegiftname">
									<span>赠送礼品包</span>
									<i @click="giftstru(item.firstCouponCodes ? JSON.parse(item.firstCouponCodes) : JSON.parse(item.oldCouponCodes),item.giftcardName)" class="icon njfont nj-tishi" style="font-size: 0.75rem;color: #666;float: right;"></i>
								</div>
								<p v-for="(val,index2) in (item.firstCouponCodes ? JSON.parse(item.firstCouponCodes) : JSON.parse(item.oldCouponCodes))" :key="index2">
									<span class="givegift">{{val.couponName}}</span>
									<span style="float: right;"><em>x</em>{{val.couponNum}}</span>
								</p>
							</div>
							<div class="bugclickgift" @click="clickcard(item)"><span>立即购买</span></div>
						</div>
					</li>
					<div class="no_data" v-if="carddata.length==0 && flag">
						<img src="static/image/no_news.png" style="width:70%;" />
						<p>暂无可购买的礼品卡</p>
					</div>
				</ul>
			</vertical-scroll>
		</div>
		<gift-card-popout ref="popoutCover" :text="giftText" :contant="carddetil"></gift-card-popout>
		<button-to-top @goTop="goTop"></button-to-top>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import GiftCardPopout from "../../real-components/GiftCardPopoutstur";
	import VerticalScroll from '../../real-components/VerticalScroll';
	import ButtonToTop from '../../real-components/ButtonToTopForTest';
	import { showLoading, hideLoading } from "@/utils/loading";
	import { MessageBox } from '@/ui-components';
	import initData from "../../utils/lxn/handleData";
	import GiftBuyCarousel from "../../real-components/GiftBuyCarousel/_index";
	import { mapGetters, mapMutations } from "vuex";
	
	import HomeNotice from "../../real-components/HomeNotice/_index";
	import HomeCarousel from "../../real-components/HomeCarousel/_index";
	import UserCard from "../../real-components/UserCard/_index";
	import NewZone from "../../real-components/NewZone/_index";
	import ProductItemNew from "../../real-components/ProductItemNew/_index";
	import FeaturedGoodsNew from "../../real-components/FeaturedGoodsNew/_index";
	import FirstClassifyNew from "../../real-components/FirstClassifyNew/_index";
	import GuessYouLike from "../../real-components/GuessYouLike/_index"
	import ActivitiesTwoPro from "../../real-components/activitiesTwoPro/_index";
	import ActivitiesOnePro from "../../real-components/activitiesOnePro/_index";
	import ActivitiesNinePro from "../../real-components/activitiesNinePro/_index";
	import ActivitiesThreePic from "../../real-components/activitiesThreePic/_index";
	import Activitiesbanner from "../../real-components/activitiesbanner/_index";
	import ActivitieCoupons from "../../real-components/ActivitieCoupons/_index";
	import ActivitieCoupons2 from "../../real-components/ActivitieCoupons2/_index";
	export default {
		data() {
			return {
				//卡的信息
				carddata: [],
				giftcardCode: "",
				flag: false,
				//弹框数据
				carddetil: [],
				myadimg: '',
				giftText: '',
				screenHeight: '',
			}
		},
		components: {
			"my-header": MyHeader,
			"gift-card-popout": GiftCardPopout,
			"vertical-scroll": VerticalScroll,
			ButtonToTop,
			GiftBuyCarousel,

			HomeCarousel,
			HomeNotice,
			UserCard,
			NewZone,
			ProductItemNew,
			FeaturedGoodsNew,
			FirstClassifyNew,
			ActivitiesTwoPro,
			ActivitiesOnePro,
			ActivitiesNinePro,
			ActivitiesThreePic,
			Activitiesbanner,
			ActivitieCoupons,
			ActivitieCoupons2,
			GuessYouLike
		},
		methods: {
			//获取广告图片接口
			// queryAdimg() {
			// 	let config = {
			// 		url: window.api.customer_host + '/giftCard/getH5GiftcardAdImg',
			// 		method: 'GET',
			// 		headers: {
			// 			'sessionId': localStorage.getItem('sessionId'),
			// 		},
			// 	};
			// 	axios(config).then((res) => {
			// 		if(res.data.data[0]) {
			// 			this.myadimg = res.data.data[0].adImg
			// 		}
			// 	})
			// },
			//跳转购买记录页面
			jumpEvent() {
				this.$router.push({
					path: 'BuyGiftCardRecord'
				})
			},
			//选中要购买的卡
			clickcard(item) {
				this.$router.push({
					path: 'GiftConfirmOrder?giftcardCode=' + item.giftcardCode
				})
			},

			//回到顶部
			goTop() {
				this.$refs.verticalScroll.goTop()
			},
			//获取数据请求
			getcarddata() {
				showLoading()
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/giftCard/selectGiftCardList',
					//url: 'http://172.19.4.164:33004/giftCard/selectGiftCardList',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					hideLoading()
					this.flag = true
					this.carddata = res.data.data
				}).catch(err => {
					hideLoading()
					Toast({
						duration: 2000,
						message: '请求接口失败',
						type: "fail"
					});
				})
			},
			//礼品卡赠品说明
			giftstru(gift, name) {
				this.$refs.popoutCover.showCover()
				this.carddetil = gift
				this.giftText = name
			},
			//请求模板轮播配置的缓存数据
			getCarsouleData(isRefresh = false){
				initData(isRefresh);
			},
			// getBannerCarouselHeight(){
			// 	var BannerCarouseHeight = window.getComputedStyle(document.getElementById(""), null).height
			// 		this.giftadimg = imgheight.split('px')[0]
			// 		this.screenHeight = window.innerHeight - '55' - this.giftadimg
			// }
		},
		computed: {
			...mapGetters("xxy", {
				dataStore: "getDataStore"
			}),
			...mapGetters("gw", ["getRealComponentsList"]),
		},
		watch: {
			// myadimg() {
			// 	setTimeout(() => {
			// 		var imgheight = window.getComputedStyle(document.getElementById("giftadimg"), null).height
			// 		this.giftadimg = imgheight.split('px')[0]
			// 		this.screenHeight = window.innerHeight - '55' - this.giftadimg
			// 	}, 300)
			// }
		},
		updated() {
			this.$nextTick(() => {
				setTimeout(() => {
					this.$refs.verticalScroll && this.$refs.verticalScroll.refresh();
				}, 500)
			});
		},
		mounted() {
			var sessionId = localStorage.getItem('sessionId');
			if(!sessionId || sessionId == 'undefined') {
				MessageBox('用户未登录账号', '请先登录账号再购买礼品卡吧').then(
					() => {
						this.$router.push({
							path: 'login',
							query: {
								page: 'buyGiftCard'
							}
						})
					}
				)
				return
			}
			this.getCarsouleData()
			// this.queryAdimg()
			this.getcarddata()
			this.screenHeight = window.innerHeight - '55' - '170'
		},
	}
</script>

<style>
	.overhid {
		overflow: hidden;
	}
	/*购买记录按钮展示*/
	
	.buyGiftCard .buycarddetil {
		position: absolute;
		top: 1rem;
		right: 1rem;
	}
	/*购买卡的列表展示*/
	
	.buyGiftCard .buyCard_list {
		padding: 0.25rem 0.75rem;
	}
	
	.buyGiftCard .buyCard_list li {
		position: relative;
		text-align: left;
		margin: 0.75rem auto;
		width: 100%;
		background: #fff;
		border-radius: 0.5rem;
		padding: 0.75rem;
	}
	
	.buyGiftCard .buyCard_list li .giftname {
		font-size: 0.75rem;
		line-height: 0.8rem;
		margin-bottom: 0.5rem;
	}
	
	.buyGiftCard .buyCard_list li .giftimg {
		width: 51%;
		height: 0;
		position: relative;
		padding-bottom: 30%;
		display: inline-block;
	}
	
	.buyGiftCard .buyCard_list li .giftimg .firstbuy {
		position: absolute;
		right: -0.9rem;
		top: -0.9rem;
		z-index: 2;
		width: 1.8rem;
		height: 1.8rem;
		line-height: 1.8rem;
		border-radius: 50%;
		background-color: #FDD232;
		color: #fff;
		text-align: center;
	}
	
	.buyGiftCard .buyCard_list li .giftimg img {
		position: absolute;
		width:8rem;
		height:5rem;
	}
	/* img{
		max-width: 100px !important;
	} */
	.buyGiftCard .buyCard_list li .giftcontant {
		position: relative;
		display: inline-block;
		width: 47%;
		padding-left: 1rem;
		vertical-align: top;
	}
	
	.buyGiftCard .buyCard_list li .giftcontant .givegiftname span {
		color: #FA4535;
	}
	
	.buyGiftCard .buyCard_list li .giftcontant p {
		font-size: 0.55rem;
	}
	
	.buyGiftCard .buyCard_list li .giftcontant .givegift {
		display: inline-block;
		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.buyGiftCard .buyCard_list li .giftcontant .bugclickgift {
		height: 1.5rem;
		text-align: center;
		line-height: 1.5rem;
		color: #fff;
		width: 100%;
		/*position: absolute;
		bottom: 0rem;
		padding-right: 1rem;*/
	}
	
	.buyGiftCard .buyCard_list li .giftcontant .bugclickgift span {
		background-color: #FA4535;
		border-radius: 0.2rem;
		width: 100%;
		display: inline-block;
		font-size: 0.65rem;
	}
	/*无赠品时购买按钮剧中样式*/
	
	.buymargintop {
		margin-top: 1.5rem;
	}
</style>